﻿@{
    ViewBag.Title = "SetTransformSimple";
    Layout = "~/Views/Shared/_EaselPage.cshtml";
}

<h2>Set Transform Simple</h2>

<canvas id="testCanvas" width="1000" height="800" style="border: #008000 solid 1px"></canvas>

<script type="text/javascript">
    var img;
    var stage;
    var angle;

    function init() {
        if (window.top != window) {
        	document.getElementById("header").style.display = "none";
        }

        angle = 0;
        img = new Image();
        img.onload = handleImageLoad;
        img.src = "/assets/rotateDemoBot.png";
    }

    function stop() {
		createjs.Ticker.removeEventListener("tick", tick);
    }

    function handleImageLoad() {
        var canvas = document.getElementById("testCanvas");
        stage = new createjs.Stage(canvas);
        stage.autoClear = true;
        bmp = new createjs.Bitmap(img);
        bmp.regX = img.width >> 1;
        bmp.regY = img.height >> 1;
        bmp.x = canvas.width - (img.width/2)>>1;
        bmp.y = 140+canvas.height - (img.height/2)>>1;
        bmp.scaleX = bmp.scaleY = 0.1;
        stage.addChild(bmp);
        stage.update();

		createjs.Ticker.addEventListener("tick", tick);
    }

    function tick(event) {
        angle += 0.025;
        var value = (Math.sin(angle) * 360);

        bmp.setTransform (bmp.x , bmp.y , bmp.scaleX , bmp.scaleY , value/2 , bmp.skewX , bmp.skewY , bmp.regX , bmp.regY );
        bmp.scaleX = bmp.scaleY = ((value)/360) + 0.25;
        stage.update(event);
    }

    window.onload = function () {
        init();
    }
</script>
